<script lang="ts" setup>
import { useMessage } from "@/hooks/useMessage";
import { SimpleListType, useSimpleList } from "@/hooks/useSimpleList";
import { userListModel } from "@/model/userList";
import { useScreenPixel } from "@/utils/web";
import { FormInstance } from "element-plus";
import { useI18n } from "vue-i18n";
import { userListUrl } from "../modules/userDesign";

const { t } = useI18n();
const emit = defineEmits(["close"]);

const { handleEdit, handleAdd } = useSimpleList<userListModel>(userListUrl) as SimpleListType;

const visible = ref(false);
const ruleFormRef = ref<FormInstance>();
const title = ref("");
const { gtMd } = useScreenPixel();
const model = ref<Partial<userListModel>>({});
const isEdit = computed<boolean>(() => {
  return model.value.id !== undefined;
});

const dialogWidth = computed(() => {
  return gtMd.value ? "50%" : "80%";
});

function edit(record: userListModel) {
  model.value = Object.assign({}, record);
  visible.value = true;
}

function cancel() {
  ruleFormRef.value?.clearValidate();
  visible.value = false;
}

async function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      if (isEdit.value) {
        handleEdit(model.value).then(() => {
          useMessage("success", t("page.common.notice.edit_success"));
          emit("close");
          visible.value = false;
        });
      } else {
        handleAdd(model.value).then(() => {
          useMessage("success", t("page.common.notice.add_success"));
          emit("close");
          visible.value = false;
        });
      }
    }
  });
}

const options = computed(() => {
  return [
    {
      name: "username",
      type: "input",
      label: t("page.common.permission.user.form.username"),
      rules: [
        {
          required: true,
          message: t("page.common.permission.user.form.username_placeholder"),
          trigger: "blur"
        }
      ],
      props: {
        maxLength: 50,
        placeholder: t("page.common.permission.user.form.username_placeholder")
      }
    },
    {
      name: "password",
      type: "input",
      label: t("page.common.permission.user.form.password"),
      rules: [
        {
          required: true,
          message: t("page.common.permission.user.form.password_placeholder"),
          trigger: "blur"
        }
      ],
      props: {
        maxLength: 50,
        placeholder: t("page.common.permission.user.form.password_placeholder")
      }
    },
    {
      name: "remark",
      type: "input",
      label: t("page.common.permission.user.form.remark"),
      rules: [
        {
          required: true,
          message: t("page.common.permission.user.form.remark_placeholder"),
          trigger: "blur"
        }
      ],
      props: {
        autosize: { minRows: 4, maxRows: 8 },
        type: "textarea",
        placeholder: t("page.common.permission.user.form.remark_placeholder")
      }
    },
    {
      name: "email",
      type: "input",
      label: t("page.common.permission.user.form.email"),
      rules: [
        {
          required: true,
          message: t("page.common.permission.user.form.email_placeholder"),
          trigger: "blur"
        }
      ],
      props: {
        maxLength: 50,
        placeholder: t("page.common.permission.user.form.email_placeholder")
      }
    },
    {
      name: "sex",
      label: t("page.common.permission.user.form.sex"),
      rules: [
        {
          required: true,
          message: t("page.common.permission.user.form.sex_placeholder"),
          trigger: "blur"
        }
      ],
      scopedSlot: "sex"
    }
  ];
});

defineExpose({
  edit,
  title: title
});
</script>
<template>
  <el-dialog v-model="visible" :width="dialogWidth" :title="title" @close="cancel">
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{ t("page.common.btn.cancel") }}</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">{{
          t("page.common.btn.confirm")
        }}</el-button>
      </span>
    </template>
    <c-form ref="ruleFormRef" v-model:value="model" label-width="80px" :options="options">
      <template #sex>
        <el-radio-group v-model="model.sex" class="ml-4">
          <el-radio label="male" size="large">{{ t("page.common.text.male") }}</el-radio>
          <el-radio label="female" size="large">{{ t("page.common.text.female") }}</el-radio>
        </el-radio-group>
      </template>
    </c-form>
  </el-dialog>
</template>

<style scoped></style>
